<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/index.js"></script>
    <script src="/lib/vue-2.6.12.js"></script>
</head>
<body>
<div class="headNav" id="app">
    <ul id="Navigation" lay-filter="">
        <li class="left">
            <a><img src=""/></a>
            <a href="javascript:;"class="typeface">思云课堂后台业务管理系统</a>
        </li>
        <li class="right">
            <ul class="layui-nav layui-bg-green  layui-layout-right" lay-bar="disabled" lay-filter="" @mouseout="hideAll">
                <li class="layui-nav-item" @mouseover="showUser" style="position:relative;margin-left: 20px;margin-right: 20px;" title="个人信息">
                    <img id="headerImage" src=""  class="layui-circle" style="border: 2px solid #A9B7B7;width: 30px;height: 30px;" alt="" />
                    <span class="userName" id="userName"></span>
                    <div @mouseout="hideUser" id="user-div">
                        <div class="account">
                            <span>账户信息</span>
                            <a onclick="jumpAccount()" id="accountSettings" style="color: #0eac9f;" href="javascript:;">账户设置</a>
                            <a id="accountHref" href=""></a>
                        </div>
                        <div class="message">
                            <div>所在部门：<span id="loginDept"></span></div>
                            <div>本次登录：<span id="nowLoginTime"></span></div>
                            <div>登录地区：<span id="loginAddress"></span><span>(IP：</span><span id="loginIp"></span><span>)</span></div>
                            <div>上次登录：<span id="oldLoginTime"></span></div>
                        </div>
                    </div>
                </li>
                <li onclick="jumpSystemHome()" id="systemHomeHit" class="layui-nav-item" style="margin-left: 20px;margin-right: 20px;" title="首页">
                    <a id="systemHome" href="" style="display: none;"></a>
                    <span class="layui-icon layui-icon-home"></span>
                </li>
                <li class="layui-nav-item" @mouseover="showMore" style="margin-left: 20px;margin-right: 20px;" title="常用菜单">
                    <span class="layui-icon layui-icon-spread-left"></span>
                    <div @mouseout="hideMore" id="more-div" >
                        <div class="account">
                            <span style="margin-left: 16px;">常用菜单</span>
                            <a style="color: #0eac9f; display: inline-block; float: right;" href="javascript:;">菜单管理</a>
                            <span style="display: block; width: 94%; height: 2px; background-color: #ccc; margin: 0 auto"></span>
                        </div>
                        <div class="menu">
                            <div>
                                <a id="commodityList" onclick="jumpCommodityList()" style="display:inline;color: #333;" href="javascript:;">商品列表</a>
                                <a id="commodityListHref" href="" style="display: none;"></a>
                                <a id="userList" onclick="jumpUserList()" style="display:inline;color: #333;" href="javascript:;">用户列表</a>
                                <a id="userListHref" href="" style="display: none;"></a>
                                <a id="lunImgsList" onclick="jumpLunImgsList()" style="display:inline;color: #333;" href="javascript:;">轮播图列表</a>
                                <a id="lunImgsListHref" href="" style="display: none;"></a>
                            </div>
                            <div>
                                <a id="classList" onclick="jumpClassList()" style="display:inline;color: #333;" href="javascript:;">课程列表</a>
                                <a id="classListHref" href="" style="display: none;"></a>
                                <a id="behindUserList" onclick="jumpBehindUserList()" style="display:inline;color: #333;" href="javascript:;">后台人员列表</a>
                                <a id="behindUserListHref" href="" style="display: none;"></a>
                                <a id="transactionImgsList" onclick="jumpTransactionImgsList()" style="display:inline;color: #333;margin-left:-28px;" href="javascript:;">订单统计</a>
                                <a id="transactionImgsListHref" href="" style="display: none;"></a>
                            </div>
                            <div>
                                <a id="microCircleList" onclick="jumpMicroCircleList()" style="display:inline;color: #333;" href="javascript:;">微圈列表</a>
                                <a id="microCircleListHref" href="" style="display: none;"></a>
                                <a id="departmentList" onclick="jumpDepartmentList()" style="display:inline;color: #333;" href="javascript:;">部门管理</a>
                                <a id="departmentListHref" href="" style="display: none;"></a>
                                <a id="couponList" onclick="jumpCouponList()" style="display:inline;color: #333;" href="javascript:;">优惠券列表</a>
                                <a id="couponListHref" href="" style="display: none;"></a>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="layui-nav-item" @mouseover="showNotice" style="margin-left: 20px;margin-right: 50px;" title="系统消息">
                    <span class="layui-icon layui-icon-notice"></span>
                    <span class="layui-badge" style="margin-left: 5px">0</span>
                    <div @mouseout="hideNotice" id="notice-div">
                        <div class="topAlert">
                            <div class="bomBorder" style="padding-left: 0; color: #CCC;">
                                <span>审核提示</span>
                            </div>
                            <div class="bomBorder">
                                <a style='display:inline;color: #1C1E24;'href='javascript:;' onclick='jumpCurriculumToExamineHref()'><div style='float: left;'>课程待审核</div><div class='count_right' style='float: left;margin-left: 6px;'><span class='count_left'>(</span><span id="span1" class='fColor' style='color: red;'></span><span class='count_left'>)</span></div></a>
                            </div>
                            <div class="bomBorder">
                                <a style='display:inline;color: #1C1E24;'href='javascript:;' onclick='jumpCommodityToExamineHref()'><div style='float: left;'>商品待审核</div><div class='count_right' style='float: left;margin-left: 6px;'><span class='count_left'>(</span><span id="span2" class='fColor' style='color: red;'></span><span class='count_left'>)</span></div></a>
                            </div>
                            <div class="bomBorder">
                                <a style='display:inline;color: #1C1E24;'href='javascript:;' onclick='jumpMicroCircleToExamineHref()'><div style='float: left;'>微圈待审核</div><div class='count_right' style='float: left;margin-left: 6px;'><span class='count_left'>(</span><span id="span3" class='fColor' style='color: red;'>"</span><span class='count_left'>)</span></div></a>
                            </div>
                        </div>
                        <div class="headAlert">
                            <div class="bomBorder" style="padding-left: 0; color: #CCC;">
                                <span>订单提示</span>
                            </div>
                            <div class="bomBorder">
                                <a style='display:inline;color: #1C1E24;'href='javascript:;' onclick='jumpCourseOrderList()'><div style='float: left;'>课程订单列表</div><div class='count_right' style='float: left;margin-left: 6px;'><span class='count_left'>(</span><span id="span4" class='fColor' style='color: red;'></span><span class='count_left'>)</span></div></a>
                            </div>
                            <div class="bomBorder">
                                <a style='display:inline;color: #1C1E24;'href='javascript:;' onclick='jumpCommodityOrderList()'><div style='float: left;'>商品订单列表</div><div class='count_right' style='float: left;margin-left: 6px;'><span class='count_left'>(</span><span id="span5" class='fColor' style='color: red;'></span><span class='count_left'>)</span></div></a>
                            </div>
                            <div class="bomBorder">
                                <a style='display:inline;color: #1C1E24;'href='javascript:;' onclick='jumpUnsubscribeListHref()'><div style='float: left;'>申请退订订单</div><div class='count_right' style='float: left;margin-left: 6px;'><span class='count_left'>(</span><span id="span6" class='fColor' style='color: red;'></span><span class='count_left'>)</span></div></a>
                            </div>
                        </div>
                        <div class="footAlert">
                            <div class="bomBorder" style="padding-left: 0; color: #CCC;">
                                <span>广告位提示</span>
                            </div>
                            <div class="bomBorder">
                                <a style='display:inline;color: #1C1E24;'href='javascript:;' onclick='jumpLunImgsList()'><div style='float: left;'>即将到期广告位</div><div class='count_right' style='float: left;margin-left: 6px;'><span class='count_left'>(</span><span id="span7" class='fColor' style='color: red;'></span><span class='count_left'>)</span></div></a>
                            </div>
                        </div>
                        <!--课程订单列表-->
                        <a id="courseOrderListHref" href="" style="display: none;"></a>
                        <!--商品订单列表-->
                        <a id="commodityOrderListHref" href="" style="display: none;"></a>
                        <!--申请退订列表-->
                        <a id="unsubscribeListHref" href="" style="display: none;"></a>
                        <!--课程审核列表-->
                        <a id="curriculumToExamineHref" href="" style="display: none;"></a>
                        <!--商品审核列表-->
                        <a id="commodityToExamineHref" href="" style="display: none;"></a>
                        <!--微圈审核列表-->
                        <a id="microCircleToExamineHref" href="" style="display: none;"></a>
                        <!--微圈评论-->
                        <a id="microCircleCommentHref" href="" style="display: none;"></a>
                        <!--课程评论-->
                        <a id="curriculumCommentHref" href="" style="display: none;"></a>
                        <!--审核日志-->
                        <a id="toExamineLogHref" href="" style="display: none;"></a>
                    </div>
                </li>
                <li class="layui-nav-item" style="margin-left: 20px;margin-right: 20px;" title="退出登录">
                    <span onclick="loginOut()" id="loginOut" class="layui-icon layui-icon-logout"></span>
                </li>
            </ul>
        </li>
    </ul>
    <div class="division"></div>
</div>

<div class="layui-body layui-row">
    <div class="panel layui-col-xs12 layui-col-sm12 layui-col-md12">
        <!--tabs标签-->
        <div class="layui-tab layui-tab-card layui-panel" lay-filter="head_tabs" lay-allowclose="true">
            <ul id="hitLi" class="layui-tab-title">

            </ul>
            <div class="layui-tab-content" style="height: 100%;">
            </div>
        </div>
    </div>
</div>

</body>
<script>
    var vm = new Vue({
        el:'#app',
        data: {},
        methods:{
            //头部导航栏隐藏框的展示与隐藏
            showUser(){
                $('#user-div').css('display','inline-block');
            },
            hideUser(){
                $('#user-div').css('display','none');
            },
            showMore(){
                $('#more-div').css('display','inline-block');
            },
            hideMore(){
                $('#more-div').css('display','none');
            },
            showNotice(){
                $('#notice-div').css('display','inline-block');
            },
            hideNotice(){
                $('#notice-div').css('display','none');
            },
            hideAll(){
                $('#user-div').css('display','none');
                $('#more-div').css('display','none');
                $('#notice-div').css('display','none');
            }
        },
        created(){}
    });


</script>
</html>